<template>
  <div style="padding: 20px">
    <div class="headerBoxList">
      <span style="margin-left: 10px">主机|分身|隐藏空间信息</span>
    </div>
    <div class="contentBoxYY">
      <!-- <el-collapse v-model="activeName" accordion>
          <el-collapse-item v-for="(item,index) in listData" :key="index" :title="'🚩 '+ item.titleKey+` （${item.content.length}行）`" :name="index">
              <div style="background: #282828;color: rgb(101, 177, 235);padding-left:20px;" v-for="(data,j) in item.content" :key="j">
                  {{ data }}
              </div>
          </el-collapse-item>
        </el-collapse> -->

      <el-card class="box-card" >

        <div class="text item">
          <img src="../../../../assets/host.png" width="60" alt="">
          <div>
            <div v-for="(item,index) in data" :key="index">{{item}}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
  
<script>
import { getRxTmpPathApi } from '@/api/phoneInfo/index'
export default {
  name: "host2",
  props: ['sendData'],
  data() {
    return {
      activeName: 0,
      listData: [],
      data: '',
      titleTT: ''
    };
  },
  watch: {
    '$store.state.account.basePhone2': function () {
      this.initFunction();
    },
    // watch: {
    //     // jtData: {
    //     //   handler(nval, oval) {
    //     //     console.log(nval, oval); //nval改变后的新数据，oval改变前的旧数据
    //     //     if(nval.class !== oval.class){
    //     //       this.titleTT = nval.label
    //     //       this.initFunction();
    //     //     }
    //     //   },
    //     //   deep: true, // 深度监听
    //     //   immediate: true,//立即执行
    //     // },
    // },
    //   computed: {
    //     jtData() {
    //       return this.$route.query.nodeData.data;
    //     },
  },
    mounted(){
      this.initFunction();
    },
    created() {
      this.initFunction();
    },
    methods: {
      initFunction() {
        if(this.sendData.subtype == 'content'){
          if(this.sendData.content!==''){
            // function splitByRunning(input) {
            //   // 使用正则表达式分割，并过滤掉不包含 "running" 的部分
            //   return input.trim().split(/UserInfo/).filter(item => item.includes('running')).map(item => `UserInfo${item.trim()}`);
            // }
            // const result = splitByRunning(this.sendData.content);
            this.data = this.sendData.content.split("UserInfo");
          }
          // const stringData = res.data;
        }
      return

      let node = this.$route.query.nodeData.data;
      let dataJson = {
        "proof_num": node.proof_num,
        "rxTmpPath": '/' + node.subtype
      }
      getRxTmpPathApi(dataJson).then(res => {
        if (!res.data) return;
        this.data = res.data;
        const stringData = res.data;
        return

        const delimiters = [
          "Latency:",
          "Package Names:",
          "App",
          "App",
          "Cache:",
        ];

        const dataArray = [];
        let currentData = "";

        for (let i = 0; i < delimiters.length; i++) {
          const delimiter = delimiters[i];
          const startIndex = stringData.indexOf(delimiter);
          const endIndex = i < delimiters.length - 1 ? stringData.indexOf(delimiters[i + 1]) : stringData.length;

          if (startIndex !== -1 && endIndex !== -1) {
            const data = stringData.slice(startIndex, endIndex).trim();
            dataArray.push(data);
          }
        }
        let arr = [];
        // 格式化字符串数组为json数据
        for (let index = 0; index < dataArray.length; index++) {
          const element = dataArray[index];
          const originalString = element;
          const delimiter = "\n";

          const delimiterIndex = originalString.indexOf(delimiter);

          if (delimiterIndex !== -1) {
            const firstPart = originalString.substring(0, delimiterIndex).trim();
            const secondPart = originalString
              .substring(delimiterIndex + 1)
              .trim();
            let item = {
              titleKey: firstPart,
              content: secondPart.split("\n"),
            };
            arr.push(item);
          } else {
            console.log("Delimiter not found in the string.");
          }

          // arr.push(item)
        }
        this.listData = arr; s
      }).catch(error => {

      })

    },
  },
};
</script>
  
<style scoped>
.text{
  display: flex;
  align-items: center;
}
.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.contentBoxYY {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  height: 87vh;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: break-word
}

@media screen and (min-width: 2360px) {
  .contentBoxYY {
    width: 95%;
    margin: 0 auto;
    overflow: hidden;
    height: 81vh;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: break-word
  }
}

@media screen and (min-width: 2561px) {
  .contentBoxYY {
    width: 95%;
    margin: 0 auto;
    overflow: hidden;
    height: 67vh;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: break-word
  }
}
</style>